<!DOCTYPE html>
<html lang="zh-cn">
<#include "../include/resource-head.ftl"/>
<link rel="stylesheet" href="/themes/plugins/fileinput/css/fileinput.min.css">
<body>
<#include "../include/common-header.ftl"/>
<div class="container col-center-block">

    <div class="order-list">
        <label style="padding-left: 16px"><input type="checkbox" id="all">&nbsp;全选</label>
    <#if orderItemModelList??>
        <#list orderItemModelList as item>
            <div class="order-item">
                <div class="order-item-detail">
                    <div class="col-xs-1">
                        <input name="id" type="checkbox" value="${item.id}" data-price="${item.price?string("##0.00")}">
                    </div>
                    <div class="col-xs-4">
                        <a href="/food/detail/${item.foodId}">
                            <img src="/data/${item.foodIcon!}" height="80px" width="80px">
                            <span>${item.foodName!}</span>
                        </a>
                    </div>
                    <div class="col-xs-1 text-center">
                        <span class="text-red">￥${item.foodPrice?string("##0.00")}</span>
                    </div>
                    <div class="col-xs-1 text-center">
                        <span>${item.count}</span>
                    </div>
                    <div class="col-xs-1 text-center">
                        <span class="text-red">￥${item.price?string("##0.00")}</span>
                    </div>
                    <div class="col-xs-2 text-center">
                        <span>${item.addtime?string("yyyy-MM-dd HH:mm:ss")}</span>
                    </div>
                    <div class="col-xs-2 text-center">
                        <span><a href="/food/del/${item.id}"  class="btn btn-warning">删除</a></span>
                    </div>
                </div>
            </div>
        </#list>
    <#else >
        <div class="text-center"><h3>您还没点餐，请先去点餐</h3></div>
    </#if>
    </div>

    <div class="pull-right">
    <#if orderItemModelList??>
        共计:&nbsp;<span class="text-red">￥<span id="price">0.0</span>元</span>
        <button class="btn btn-success" onclick="pay()">支付</button>
        <#else >
            <a href="/index" class="btn btn-primary">去点餐</a>
    </#if>
    </div>
</div>


<!-- Modal -->
<div class="modal fade bs-example-modal-sm" id="myModal" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                        aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="myModalLabel">收货地址</h4>
            </div>
            <div class="modal-body">
                <form action="/order/pay" method="post" name="form" id="form" class="form-horizontal">
                    <input type="hidden" name="ids" id="ids">
                    <div class="form-group has-info">
                        <label class="col-xs-12 col-sm-3 control-label no-padding-right">收货人</label>
                        <div class="col-xs-12 col-sm-5">
                            <input type="text" class="form-control" required name="receiveuser"/>
                        </div>
                    </div>
                    <div class="form-group has-info">
                        <label class="col-xs-12 col-sm-3 control-label no-padding-right">收货地址</label>
                        <div class="col-xs-12 col-sm-5">
                            <textarea class="form-control" name="receiveaddress" required></textarea>
                        </div>
                    </div>
                    <div class="form-group has-info">
                        <label class="col-xs-12 col-sm-3 control-label no-padding-right">备注</label>
                        <div class="col-xs-12 col-sm-5">
                            <textarea class="form-control" name="remark"></textarea>
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                <button type="submit" class="btn btn-primary" form="form">提交订单</button>
            </div>
        </div>
    </div>
</div>


<#include "../include/common-foot.ftl"/>
</body>
<#include "../include/resource-script.ftl"/>
<script>
    function pay() {
        var list = $("input[name='id']:checked");
        var ids = '';
        if (list.length > 0) {
            $(list).each(function () {
                ids += $(this).val() + ",";
            });
        } else {
            alert("请至少选择一个");
            return;
        }
        $("#ids").val(ids);
        $("#myModal").modal("show");
    }

    $("#all").change(function () {
        var list = $("input[name='id']");
        var _this = this;
        $(list).each(function () {
            this.checked = _this.checked;
            $(this).change();
        });
    });

    $("input[name='id']").change(function () {
        var list = $("input[name='id']:checked");
        var price = 0;
        if (list.length > 0) {
            $(list).each(function () {
                price += parseFloat($(this).data("price"));
            });
            $("#price").text(price);
        } else {
            $("#price").text("0.0");
        }
    });
</script>
</html>